<template>
	<div class="form-adapt-container layout-pd">
		<el-card shadow="hover">
			<el-form :inline="true" :model="state.param"  label-width="105px">
                <el-form-item label="状态:">
                    <el-select v-model="state.param.type"  placeholder="请选择分类类型" @change="getCategoryList">
                        <el-option :key = 0 label = "全部" :value = 0 />
                        <el-option :key = 1 label = "显示" :value = 1 />
                        <el-option :key = 1 label = "不显示" :value = 1 />
                    </el-select>
                </el-form-item>
                <el-form-item label="搜索:">
                    <el-input class="width320" v-model="state.tableData.param.keyWords" placeholder="请输入" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button  type="primary" @click="addCategory('add', {})">
                    <el-icon>
                        <ele-Plus />
                    </el-icon>新增
                    </el-button>
                </el-form-item>
                <el-form-item>
                    <el-button  type="primary" @click="addCategory('add', {})">
                    <el-icon>
                        <ele-Plus />
                    </el-icon>查询
                    </el-button>
                </el-form-item>
			</el-form>
		</el-card>
		<el-card shadow="hover" class="mt15 tree-container">
			<div>
				<el-table :data="state.tableData.data" ref="goodTableRef" v-loading="state.tableData.loading" style="width: 100%">
					<el-table-column label="ID" width="80">
						<template #default="scope">
							<span>{{ scope.row.data.categoryId }}</span>
						</template>
					</el-table-column>
					<el-table-column label="名称" >
						<template #default="scope">
							<span>{{ scope.row.data.categoryName }}</span>
						</template>
					</el-table-column>
                    <el-table-column label="分类类型" >
						<template #default="scope">
							<span>{{ scope.row.data.categoryName }}</span>
						</template>
					</el-table-column>
					<el-table-column label="分类图标" align="center">
						<template #default="scope">
							<div style="display: flex;justify-content:center;align-items: center;">
								<el-image class="ml15" style="width:32px;height: 32px;" :src="scope.row.data.categoryUrl"
									fit="cover" />
							</div>
						</template>
					</el-table-column>
                    <el-table-column label="排序" >
						<template #default="scope">
							<span>{{ scope.row.data.categoryName }}</span>
						</template>
					</el-table-column>
                    <el-table-column label="状态" >
						<template #default="scope">
							<span>{{ scope.row.data.categoryName }}</span>
						</template>
					</el-table-column>
					<el-table-column label="来源" >
						<template #default="scope">
							<span>{{ scope.row.data.sourceName }}</span>
						</template>
					</el-table-column>
					<el-table-column label="创建人" >
						<template #default="scope">
							<span>{{ scope.row.data.createdBy }}</span>
						</template>
					</el-table-column>
					<el-table-column label="创建时间" >
						<template #default="scope">
							<span>{{ scope.row.data.createdTime }}</span>
						</template>
					</el-table-column>
					<el-table-column label="操作" >
						<template #default="scope">
							<el-button text type="primary"  @click="addCategory('edit',scope.row.data)">
								编辑
							</el-button>&emsp;
							<el-button text type="danger" @click="deleteHandle(scope.row.data)">
								删除
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
		</el-card>
		<addDialog ref="addDialogRef" @refresh="getCategoryList()" />
	</div>
</template>

<script setup lang="ts">
import { reactive, onMounted, ref, defineAsyncComponent } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { productCategoryList } from "/@/api/commodity";
const addDialog = defineAsyncComponent(() => import('/@/views/shop/article/classification/components/addDialog.vue'));
// 定义变量内容
const addDialogRef = ref();
const state = reactive({
	param: {
		type: 0,
		name: '',
	},
	storeCategoryList:[] as Array<any>,
	shopCategoryList:[] as Array<any>,
	tableData: {
		data: [],
		total: 0,
		loading: false,
		param: {
			search: '',
			pageNum: 1,
			pageSize: 10,
		},
	},
});


// 打开新增编辑分类弹窗
const addCategory = (type: string, row ?: Object) => {
	addDialogRef.value.openDialog(type, state.param.type, JSON.parse(JSON.stringify(row)));
};

const editHandle = (row: any) => {
	if(row.hasChildren){
		ElMessage.success('提交成功');
	}else{
		ElMessage.success('暂无下级');
	}
}

const deleteHandle = (row: any) => {
	ElMessageBox.confirm(
		'确定删除?',
		'提示',
		{
			confirmButtonText: '确定',
			cancelButtonText: '取消',
			type: 'warning',
		}
	)
	.then(() => {
		
    })
    .catch(() => {
       
    })
}


// 获取商品分类  
const getCategoryList = async () => {
	state.tableData.loading = true
	const { results } = await productCategoryList({ platformType: state.param.type });
	state.tableData.data = results
	state.tableData.loading = false
}

// 页面加载时
onMounted(() => {
	getCategoryList();
});

</script>

<style scoped lang="scss">
.tree-container {
	.tree-head {
		height: 48px;
		line-height: 48px;
		border: 1px solid var(--next-border-color-light);
		border-bottom: none;
		display: flex;
		padding: 0 20px;
		font-weight: bold;
		color: #909399;
		.tree-head-check {
			width: 38px;
			text-align: right;
		}
		.tree-head-one, .tree-head-two, .tree-head-three, .tree-head-four, .tree-head-five, .tree-head-six {
			flex: 1;
		}
	}
	.el-tree {
		overflow: hidden;
		border-bottom: 1px solid var(--next-border-color-light);
		.tree-custom-node {
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-right: 8px;
			width: 100%;
		}
		&:deep(.el-tree-node) {
			border: 1px solid var(--next-border-color-light);
			border-bottom: none;
			color: #606266;
			.el-tree-node__content {
				line-height: 57px !important;
				height: 57px !important;
			}
			.el-tree-node__children {
				.el-tree-node {
					border: none;
				}
				.el-tree-node__content {
					border-top: 1px solid var(--next-border-color-light);
				}
			}
		}
	}
}
</style>
